<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>折现图</title>
    <script type="text/javascript" src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/main.js"></script>
    <script type="text/javascript" src="H5ComponentPolyline.js"></script>
    <style type="text/css">
        /* 基本图文组件样式 */
        .h5_component{
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;

        }
        /* 折线图组件样式 */
        .h5_component_polyline canvas{
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            transform: translate3d(0,0,0);
            /*background: #dde2d2;*/
        }
        .h5_component_polyline .text{
            position: absolute;
            font-size: 1rem;
            text-align: center;
            transform:scale(1);
            color: #3b3b3b;
            opacity: 1;
        }
        /* 项目名称，入场出场动画 */
        .h5_component_polyline_load .text{
            /*-webkit-transition:all 1s 1s ;*/
            opacity: 1;
        }
        .h5_component_polyline_leave .text{
            opacity: 0;
        }
    </style>
    <body style="width: 100%;height: 100%;">
        <script type="text/javascript">
            $(function () {
                var cfg ={
                    type:'polyline',
                    data:[['1',1500,'#ff7676'],['2',2500],['3',1600,'blue'],['4',1900],['5',2400],['6',3200]],
                    width:1000,
                    height:500,
                    center:true,
                    css:{opacity:1,top:200},
                    animateIn:{opacity:1,top:250},
                    animateOut:{opacity:0,top:100},
                }
                var h5=new H5ComponentPolyline('polyline',cfg);
                $('body').append(h5);
                $('.h5_component').trigger('onload');
            })

        </script>

    </body>

</html>